<template>
  <div style="width: 100%;">
    <el-page-header @back="goBack" content="支出资金计划列表">
    </el-page-header>
    <el-divider></el-divider>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="params.fundplanName" placeholder="资金计划名称" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.planId" placeholder="计划编号" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.projectName" placeholder="项目名称" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="params.approveStatus" :value="params.approveStatus">
          <el-option label="审批状态" value=""></el-option>
          <el-option label="审批中" value="1"></el-option>
          <el-option label="审批不通过" value="2"></el-option>
          <el-option label="审批通过" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :clearable="true">
        <el-input v-model="params.filledBy" placeholder="填报人"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button @click="handleSearch" type="primary">检索</el-button>
        <el-button type="primary" @click="dy">打印</el-button>
        <el-button type="primary" @click="exports">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="pageResult.records">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="计划编号" prop="id" v-if="show" ></el-table-column>
      <el-table-column label="计划编号" prop="planId"></el-table-column>
      <el-table-column label="资金计划名称" prop="fundplanName"></el-table-column>
      <el-table-column label="项目名称" prop="projectName"></el-table-column>
      <el-table-column label="计划月份" prop="planIn"></el-table-column>
      <el-table-column label="申请金额" prop="applyForMoney"></el-table-column>
      <el-table-column label="填报人" prop="filledBy"></el-table-column>
      <el-table-column label="填报日期" prop="fillingDate"></el-table-column>
      <el-table-column label="流程状态" prop="approveStatus">
        <template slot-scope="scope">
          <span style="color: orange;font-weight: 700" v-if="scope.row.approveStatus=='1'">审批中</span>
          <span style="color: red;font-weight: 700" v-if="scope.row.approveStatus=='2'">审批不通过</span>
          <span style="color: green;font-weight: 700" v-if="scope.row.approveStatus=='3'">审批通过</span>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>

    <el-footer class="case-list-footer">
      <el-pagination
          style="margin: 10px auto"
          background
          layout="total , sizes ,prev, pager, next,jumper"
          :page-sizes="[5,10,15,20]"
          :total="pageResult.total"
          :page-size="pageResult.size"
          class="pagination"
          @current-change="handleIndexChange"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>
import {ZiJinZhiChuJiHuaBaoCun} from "../../../model/xz/ZiJinZhiChuJiHuaBaoCun";
const ziJinZhiChuJiHuaBaoCun = ZiJinZhiChuJiHuaBaoCun.getInstance();
export default {
  name: "ExpendFundPlanselect",

  data() {
    return {
      show:false,
      params: {
        planId: '',
        projectName: '',
        approveStatus: '',
        fundplanName:'',
        filledBy:'',
      },
      pageResult:[]
    }
  },
  methods:{
    getExpendFundPlanlist(){
      ziJinZhiChuJiHuaBaoCun.getPageList(this.params).then(response => {
        if(response.data.code === 0){
          this.pageResult = response.data.data
        }
      })
    },
    handleSearch(){
      this.params.page = 1
      this.getExpendFundPlanlist()
    },
    handleIndexChange(index){
      this.params.page = index
      this.getExpendFundPlanlist()
    },
    handleSizeChange(size){
      this.params.size = size
      this.getExpendFundPlanlist()
    },

    goBack(){
      history.back()
    },
    //打印
    dy() {
      window.print();
    },
    //导出
    exports(){
      alert(123);
    }
  },
  created(){
    this.getExpendFundPlanlist()
  }

}
</script>

<style scoped>

</style>